<template>
  <page title="钱包" ref="pageRef" nav-color="transparent">
    <view v-if="data" class="info flex-column-align-center">
      <image class="bg" :src="resource.center_bg1" mode="scaleToFill" />
      <view style="font-size: 60rpx" class="bold color-white">{{
        data.balance
      }}</view>
      <view class="font6 color-white paddingT2" style="opacity: 0.8">余额</view>
      <view class="flex-align-around paddingT15" style="width: 75%">
        <view class="btn-withdraw btn-clear" @click="showWithdraw"
          >我要提现</view
        >
        <view class="btn-recharge" @click="showRecharge">充值</view>
      </view>
    </view>
    <tabbar2
      custom-class="marginX14 marginY10"
      :tabs="tabs"
      @change="clickTab"
      light
    />
    <view v-if="tableData && tableData.length > 0" class="list">
      <view
        v-for="item in tableData"
        :key="item.itemId"
        class="cell border-bottom1 flex-align-between"
      >
        <view>
          <view class="font4 bold" style="color: #666666">{{
            item.itemDesc
          }}</view>
          <view class="color-3 font2 paddingT4">{{ item.createTime }}</view>
        </view>
        <view
          class="font10"
          :class="[item.type === 'IN' ? 'color-theme' : 'color-1']"
        >
          <text v-if="item.type === 'IN'">+</text>
          <text v-else-if="item.type === 'OUT'">-</text>
          {{ item.money }}
        </view>
      </view>
    </view>
    <empty v-if="isEmpty" :top="120" />
    <image
      class="rechargeListBtn"
      :src="ossurl.mine.activePage.rechargeListBtn"
      @click="gotoRechargeList()"
      mode="widthFix"
    />
  </page>
</template>

<script>
import pageMixin from './../../mixin/page';
import empty from '@/components/empty';
import loginMixin from '@/mixin/login';
import resource from '@/utils/resource';
import ossurl from '@/utils/ossurl';
import tabbar2 from '@/components/tabbar2';

const Tabs = [
  { title: '全部', value: '' },
  { title: '收入', value: 'IN' },
  { title: '支出', value: 'OUT' },
];

export default {
  mixins: [pageMixin, loginMixin],
  components: { empty, tabbar2 },
  data() {
    return {
      tabs: Tabs,
      tab: Tabs[0],
      resource,
      ossurl,
      data: null,
    };
  },
  onShow() {
    this.getData();
    this.refresh();
  },
  onPullDownRefresh() {
    this.getData();
    this.refresh();
  },
  onReachBottom() {
    this.loadMore();
  },
  methods: {
    init() {
      this.getData();
      this.refresh();
    },
    clickTab(item) {
      this.tab = item;
      this.refresh(true);
    },
    async getData(loading = false) {
      const res = await this.$service.wallet.info('CASH', loading);
      this.data = res;
      uni.stopPullDownRefresh();
    },
    async loadData() {
      const res = await this.$service.wallet.bill(
        this.pageNum,
        this.pageSize,
        'CASH',
        this.tab.value
      );
      return res;
    },
    showRecharge() {
      const user = this.$store.getters.user;
      // this.$common.showKefu(`我要充值 (${user.username})`)

      this.$router.push('recharge');
    },
    async showWithdraw() {
      const res = await this.$service.base.track2();
      if (res && !res.auditing) {
        this.$router.push('withdraw', { type: 'ALIPAY' });
      } else {
        this.$router.push('withdraw');
      }
    },
    gotoRechargeList() {
      uni.navigateTo({
        url: '/subPackages/pages/mine/activePage/rechargeList',
      });
    },
  },
};
</script>
<style lang="scss"></style>
<style lang="scss" scoped>
.info {
  margin: 24rpx 28rpx 30rpx;
  border-radius: 20rpx;
  overflow: hidden;
  position: relative;
  height: 278rpx;

  background: linear-gradient(251deg, #f0cf49 -1%, #f08949 99%);

  box-shadow: 0px 0px 10rpx 0px rgba(240, 207, 73, 0.5);
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 278rpx;
  }
}
.list {
  margin: 0 28rpx 28rpx;
  border-radius: 20rpx;
  overflow: hidden;
  background: #fff;
  .cell {
    padding: 36rpx 30rpx;
  }
}
.btn-withdraw,
.btn-recharge {
  width: 180rpx;
  height: 64rpx;
  line-height: 60rpx;
  text-align: center;
  border-radius: 32rpx;
  z-index: 1000;
}
.btn-withdraw {
  color: #fff;
  border: 2rpx solid #fff;
}
.btn-recharge {
  background: #fff;
  border: 2rpx solid #fff;
  color: #f08949;
}
.rechargeListBtn {
  width: 104rpx;
  height: 124rpx;
  position: fixed;
  top: 600rpx;
  right: 10rpx;
  z-index: 100;
}
</style>
